<!--
 * @Description:购物车卡片
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-18 14:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-20 14:09:26
-->
<template>
	<view class="cart-item-container" :style="{'border':border?'2rpx solid #E1E8E8':'','border-radius':radius}">
		<view class="shopBox" style="" v-if="showShop" @click="goShopInfo()">
			<image style="width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 20rpx;"
				:src="$u.file.getMedieUrl(data.shopAvatarUrl)" mode="aspectFill"></image>
			<view class="">

				{{data.shopName}}
			</view>
			<image style="height: 20rpx;width: 20rpx;margin-left: 5px;" src="@/static/svg/right-arrows.svg" mode="aspectFill">
		</view>
		<view class="cart-item-main">

			<view class="show" @click="!isSeckill?goProductDetail(data):''">
				<imageForSize radius="26" size="160" :src="$u.file.getMedieUrl(data.image||data.images)"></imageForSize>
				<view class="info">
					<p class="name">
						{{ data.name }}
					</p>
					<p class="name">
						{{ data.skuName }}
					</p>
					<p class="describe">
						{{ data.des||data.goodsDesc }}
					</p>
					<view class="" v-if="data.inventory">
						<p class="price" >
							${{ publicJS.toFixed(data.price, 2) }}|{{$t('product.residualInventory')}} {{data.inventory}}
						</p>
					</view>
					<view class="" v-else>
						<p class="price" v-if="data.price !== undefined&&!data.seckillPrice">
							${{ publicJS.toFixed(data.price, 2) }}
						</p>
						<p class="price" v-else>
							${{ publicJS.toFixed(data.seckillPrice, 2) }}
						</p>
					</view>
				
				</view>
			</view>
			<view class="number-check" v-if="checkShow">
				<!-- <u-radio-group v-model="value" @change="radioGroupChange"> -->
				<u-checkbox @change="checkChange" :value="check" shape="circle" :name="data.skuId||data.skuName">
					<!-- {{item.name}} -->
				</u-checkbox>
				<!-- </u-radio-group> -->
				<view class="" v-if="data.inventory">
				<u-number-box class="capsule" :long-press="false" type="capsule" :min="minNum" v-model="data.num"
				:max="data.inventory"
					@change="numberBoxChange">
				</u-number-box>
				</view>
				<view class="" v-else>
				<u-number-box class="capsule" :long-press="false" type="capsule" :min="minNum" v-model="data.num"
			
					@change="numberBoxChange">
				</u-number-box>
				</view>
			
			</view>
			<slot v-else name="btn"></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * cartItem 购物车卡片
	 * @description 该组件主要为我的购物车使用。
	 * @property {Object} data 填充卡片所需数据
	 * @property {Boolean} border 是否展示边框
	 * @property {Boolean} check 是否选中
	 * @property {String} radius 圆角传递百分比或者长度
	 * @property {checkShow} checkShow 是否展示选择框
	 */
	export default {
		props: {
			data: {
				default: () => ({}),
				type: Object
			},
			border: {
				default: true,
				type: Boolean
			},
			minNum: {
				default: 1,
				type: Number
			},
			check: {
				default: true,
				type: Boolean
			},
			radius: {
				default: '26rpx',
				type: String
			},
			checkShow: {
				default: true,
				type: Boolean
			},
			isSeckill: {
				default: false,
				type: Boolean
			},
			showShop: {
				default: false,
				type: Boolean
			},
		},
		data() {
			return {
				first: true,
			};
		},
		methods: {
			goProductDetail(item) {

				if ((item.status !== undefined) && !item.status) {
					this.$u.toast('该商品已经下架')
				} else {
					uni.navigateTo({
						url: '/pages/productDetails/productDetails?productId=' + item.goodsId
					})
				}

			},
			// 添加数量
			numberBoxChange(val) {
				const vals = val.value
				const value = this.data.num
				if (!this.first) {
					this.$emit('numChange', vals, (status) => {
						this.data.num = vals
						if (status) {
							// this.data.num = vals
						} else {
							this.$nextTick(() => {
								setTimeout(() => {
									this.data.num = value
								}, 200)
							})
						}
					})
				}
				this.first = false

			},
			//浏览店铺
			goShopInfo() {
				this.$u.route('/pages/shop/index', {
					shopId: this.data.shopId,
				})
				this.$u.post(`/app/shop/browseShop/${this.data.shopId}`).then((res) => {

				});
			},
			checkChange(val) {
				console.log(val)
				this.$emit('checkChange', {
					state: val.value,
					id: val.name || val.goodsSpecification
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cart-item-container {
		padding: 20rpx;

		.shopBox {
			display: flex;
			align-items: center;
			padding: 0 10px 20px;
		}

		.cart-item-main {
			display: flex;

			.show {
				width: 0;
				flex: auto;
				display: flex;

				.info {
					padding-left: 12rpx;
					flex: 1;
					width: 0;
					position: relative;

					.name {
						color: #1B1D29;
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						margin: 10rpx 0;
					}

					.describe {
						margin-top: 10rpx;
						color: #91909A;
						font-size: 22rpx;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.price {
						position: absolute;
						bottom: 0;
						color: #000;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}

			.number-check {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
			}
		}
	}
</style>